import {connect} from 'react-redux'
import React, {Component} from 'react'
import { Link } from "react-router-dom";
import copy from 'copy-to-clipboard';//copy包

import { Tabs,List, WhiteSpace, Badge , Button,Toast } from 'antd-mobile';
const Item = List.Item;
const Brief = Item.Brief;

import Header from "../components/header";

import {loadAllPayList,loadFastPayList,loadBankPayList} from "../redux/actions/userAction"
export class Change extends Component {
  constructor (props){
   super(props)
   this.state= {
     activetab: 0
   }
}
changeTitle(){
  return [ { title: "快捷支付" ,url: "/my/change/money/quick"},
  { title: "公司入款",url: "/my/change/money/compony" }]
}

baseInfo(){
  return {
      selfinfo: [
          {
              title: '支付宝支付',
              icon: 'icon-touzhujilu',
              link: '/record'
          }, {
              title: '微信支付',
              icon: 'icon-find1',
              link: '/moneyrecord'
          }, {
              title: 'QQ钱包支付',
              icon: 'icon-jinriyingkui',
              link: '/my/todayinput'
          },
      ],
      selfhelp:[
          {
              title: '会员资料',
              icon: 'icon-menu',
              link: 'mymoney',
              imgsrc: '/static/images/ICON_03.png',
          }, {
              title: '会员消息',
              icon: 'icon-huiyuanxiaoxi',
              link: '/',
              imgsrc: '/static/images/ICON_03.png',
          }, {
              title: '在线客服',
              icon: 'icon-zaixiankefu',
              link: '/',
              imgsrc: '/static/images/ICON_03.png',
          }
      ]

  }

}
  componentWillMount(){
    const {key} = this.props.match.params
    this.setState({
      activetab: key === "quick" ? 0 : 1
    })
    const {dispatch,user} = this.props
    // key === "quick" ?  user.get("fastpaylist").length==0 && dispatch(loadFastPayList()) :
    //   user.get("bankpaylist").length==0 && dispatch(loadBankPayList())
   Object.keys(user.get("allpaylist")).length==0 &&  dispatch(loadAllPayList())

  }

  componentWillReceiveProps(newprops){
    const {key} = newprops.match.params
    const {dispatch,user} = newprops
    // if(key != this.props.match.params.key ){
    //    key === "quick" ?  user.get("fastpaylist").length==0 && dispatch(loadFastPayList()) :
    //    user.get("bankpaylist").length==0 && dispatch(loadBankPayList())
    // }
  }
renderQuickpay(){
  const {history,user} = this.props
  return <div className="pay"> 
        <h2>在线快捷支付</h2>
          { user.get("allpaylist").thirdPayKjList.map((itemself,index)=>{
                return  <Item key={index}
                        arrow="horizontal"
                        onClick={() => {this.props.history.push("/my/pay/"+itemself.payType)}}
                        ><img src={itemself.smallPicUrl} alt="" />{itemself.payName}</Item>
            })}
        <h2>传统快捷支付</h2>
           { user.get("allpaylist").scanCodePayList.map((itemself,index)=>{
                return  <Item key={index}
                        arrow="horizontal"
                        onClick={() => {this.props.history.push("/my/traditionPay/"+itemself.payType)}}
                        ><img src={itemself.smallPicUrl} alt="" />{itemself.payNname}</Item>
            })}
      </div>
  
}
  copy(value){
    copy(value)
    Toast.success("复制成功!");
  }
   render() {
    const {dispatch,history,user} = this.props
    // console.log(user.get("fastpaylist"));
    // console.log(user.get("bankpaylist"));

   return <div className="Changecontext">
     <Header title="充值" {...this.props}></Header>
      <div className="Change">
        
          <Tabs tabs={this.changeTitle()}
          initialPage={this.state.activetab}
          onChange={(tab, index) => { this.props.history.replace(tab.url) }}
        >
          <div style={{padding: "0 1rem" , backgroundColor: '#fff'}}>
              <List className="my-self">
                {Object.keys(user.get("allpaylist")).length!==0 && this.renderQuickpay()}
                   
                </List>
          </div>
          <div style={{  backgroundColor: '#fff' }}>
                  <List className="my-compony">
            {Object.keys(user.get("allpaylist")).length !==0  && user.get("allpaylist").incBankPayList.map((ListItem, index) => {
                return  <Item key={index}
               
                thumb={ListItem.smallPicUrl}
                multipleLine
                // onClick={() => {
                //     this.props.history.push(ListItem.link)
                // }}
              >
                
                <h4>{ListItem.bankType}</h4> 
                <div className="compony-name">
                  <ul>
                    <li><span id="biao1">{ListItem.bankUser}</span> <span onClick={()=>{this.copy(ListItem.bankUser)}} >复制</span></li>
                    <li><span>{ListItem.bankCard}</span> <span onClick={()=>{this.copy(ListItem.bankCard)}} >复制</span></li>
                    <li><span>开户行：{ListItem.bankAddress}</span> <span onClick={()=>{this.copy(ListItem.bankAddress)}} >复制</span></li>
                  </ul>
                </div>
              </Item>
            })}
              
              </List>

              <div className="warning">
                <p>通过以上方式向公司银行账户（包含微信、支付宝）转账完成后进入入款表单页面提交入款信息即可完成充值</p>
              </div>
              <Button type="primary" onClick={()=>{this.props.history.push("/my/compony/pay/1/")}}>入款表单</Button>

          </div>
        </Tabs>
        
      </div>
        <div className="tips">
            <p>特别提示：充值请确认官方渠道，谨防骗子</p>
            <p>如有任何疑问请联系客服QQ：12345698</p>
        </div>
   </div>
   }
}


function mapStateToProps(state) {
  return {
    user: state.user // gives our component access to state through props.My
  }
}

export default connect(mapStateToProps)(Change)